<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>轮播图</title>
    <script src="https://code.jquery.com/jquery-3.1.1.min.js"></script>
</head>
<style>
    .container {
        position: absolute;
        left: 50%;
        top: 50%;
        transform: translate(-50%, -50%);
        width: 800px;
        height: 400px;
        margin: auto;
    }

    .preBtn,
    .nextBtn {
        position: absolute;
        top: 50%;
        transform: translateY(-50%);
        width: 40px;
        height: 60px;
        background-color: rgb(0, 0, 0, 0.5);
        color: #fff;
        text-align: center;
        line-height: 60px;
        font-size: 20px;
    }

    .preBtn {
        left: 0;
    }

    .nextBtn {
        right: 0;
    }

    .btn:hover {
        cursor: pointer;
    }

    .container img {
        width: 100%;
        height: 100%;
    }
</style>

<body>
    <div class="container">
        <span class=" btn preBtn">
            < </span>
                <span class=" btn nextBtn"> > </span>
                <img src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1594880868560&di=afe0fa44c820fa068ab52e8cadf4a359&imgtype=0&src=http%3A%2F%2Fe.hiphotos.baidu.com%2Fzhidao%2Fpic%2Fitem%2Fb64543a98226cffc7a951157b8014a90f703ea9c.jpg"
                    class="imgLink">
    </div>
    <script>
        let currentIndex = 0
        let srcImg = [
            "https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1594880868560&di=afe0fa44c820fa068ab52e8cadf4a359&imgtype=0&src=http%3A%2F%2Fe.hiphotos.baidu.com%2Fzhidao%2Fpic%2Fitem%2Fb64543a98226cffc7a951157b8014a90f703ea9c.jpg",
            "https://ss1.bdstatic.com/70cFvXSh_Q1YnxGkpoWK1HF6hhy/it/u=3147590882,1934776101&fm=26&gp=0.jpg",
            "https://ss0.bdstatic.com/70cFuHSh_Q1YnxGkpoWK1HF6hhy/it/u=3949459162,1277590300&fm=26&gp=0.jpg",
            "https://ss1.bdstatic.com/70cFvXSh_Q1YnxGkpoWK1HF6hhy/it/u=2075903360,405209795&fm=26&gp=0.jpg",
            "https://ss0.bdstatic.com/70cFvHSh_Q1YnxGkpoWK1HF6hhy/it/u=3112377811,3511978923&fm=26&gp=0.jpg"

        ]
        function addEventImg(obj, str) {
            obj.on('click', function () {

                if (str === 'left') {
                    currentIndex--
                    if (currentIndex < 0) {
                        currentIndex = srcImg.length - 1
                    }

                } else if (str === 'right') {
                    currentIndex++
                    if (currentIndex > srcImg.length - 1) {
                        currentIndex = 0
                    }
                }
                $('.imgLink').fadeOut()
                $('.imgLink').get(0).src = srcImg[currentIndex]
                $('.imgLink').fadeIn()

            })
        }
        addEventImg($('.preBtn'), 'left')
        addEventImg($('.nextBtn'), 'right')



    </script>
</body>

</html>